<template>
  <div>
    <el-row  type="flex">
      <el-col :span="4" :style="{ height: heightTree }">
        <el-tree
           style="margin-left:10px;margin-top:20px;"
          :data="data"
          :props="defaultProps"
          @node-click="handleNodeClick"
        ></el-tree>
      </el-col>
      <el-col class="formWarp" :span="20" style="margin-left:10px;" :style="{ height: heightTree }">
        <h2 style="text-align:center;font-size:30px;">大 组 工 网 管 理 人 员 备 案 表</h2>
        <div class="infohead">
          <p>填报单位:(盖章)<input v-model="fillingOrg" readonly class="inputVal" /></p>
          <p>填表人:<input v-model="fillingPerson" readonly class="inputVal" /></p>
          <p>联系方式:<input v-model="fillingTel" readonly class="inputVal" /></p>
        </div>
        <div :style="{ height: heightTable }" style="overflow-y: scroll;margin-top:10px;">
          <table border="1" class="myTable">
            <tr>
              <td colspan="6" style="text-align: left; font-size: 18px">
                一、大组工网网络安全管理人员配备情况
              </td>
            </tr>
            <tr>
              <td>人员类型</td>
              <td>姓名</td>
              <td>职务</td>
              <td>部门</td>
              <td>办公电话</td>
              <td>手机号码</td>
            </tr>
            <tr>
              <td>系统管理员</td>
              <td style="text-align:center;"><el-input readonly v-model="netSafeAdminName" /></td>
              <td><el-input readonly v-model="netSafeAdminPost" /></td>
              <td><el-input readonly v-model="netSafeAdminDepartment" /></td>
              <td><el-input readonly v-model="netSafeAdminTel" /></td>
              <td><el-input readonly v-model="netSafeAdminPhone" /></td>
            </tr>
            <tr>
              <td>安全保密管理员</td>
              <td><el-input readonly v-model="netSafeSecrecyName" /></td>
              <td><el-input readonly v-model="netSafeSecrecyPost" /></td>
              <td><el-input readonly v-model="netSafeSecrecyDepartment" /></td>
              <td><el-input readonly v-model="netSafeSecrecyTel" /></td>
              <td><el-input readonly v-model="netSafeSecrecyPhone" /></td>
            </tr>
            <tr>
              <td>安全审计员</td>
              <td><el-input readonly v-model="netSafeAuditName" /></td>
              <td><el-input readonly v-model="netSafeAuditPost" /></td>
              <td><el-input readonly v-model="netSafeAuditDepartment" /></td>
              <td><el-input readonly v-model="netSafeAuditTel" /></td>
              <td><el-input readonly v-model="netSafeAuditPhone" /></td>
            </tr>
            <tr>
              <td colspan="6" style="text-align: left; font-size: 18px">
                二、大组工网网站管理人员配备情况
              </td>
            </tr>
            <tr>
              <td>人员类型</td>
              <td>姓名</td>
              <td>职务</td>
              <td>部门</td>
              <td>办公电话</td>
              <td>手机号码</td>
            </tr>
            <tr>
              <td>系统管理员</td>
              <td><el-input readonly v-model="netManagerAdminName" /></td>
              <td><el-input readonly v-model="netManagerAdminPost" /></td>
              <td><el-input readonly v-model="netManagerAdminDepartment" /></td>
              <td><el-input readonly v-model="netManagerAdminTel" /></td>
              <td><el-input readonly v-model="netManagerAdminPhone" /></td>
            </tr>
            <tr>
              <td>安全保密管理员</td>
              <td><el-input readonly v-model="netManagerSecrecyName" /></td>
              <td><el-input readonly v-model="netManagerSecrecyPost" /></td>
              <td><el-input readonly v-model="netManagerSecrecyDepartment" /></td>
              <td><el-input readonly v-model="netManagerSecrecyTel" /></td>
              <td><el-input readonly v-model="netManagerSecrecyPhone" /></td>
            </tr>
            <tr>
              <td>安全审计员</td>
              <td><el-input readonly v-model="netManagerAuditName" /></td>
              <td><el-input readonly v-model="netManagerAuditPost" /></td>
              <td><el-input readonly v-model="netManagerAuditDepartment" /></td>
              <td><el-input readonly v-model="netManagerAuditTel" /></td>
              <td><el-input readonly v-model="netManagerAuditPhone" /></td>
            </tr>
            <tr>
              <td colspan="6" style="text-align: left; font-size: 18px">
                三、省委组织部大组工网电子邮件系统管理人员配备情况
              </td>
            </tr>
            <tr>
              <td>人员类型</td>
              <td>姓名</td>
              <td>职务</td>
              <td>部门</td>
              <td>办公电话</td>
              <td>手机号码</td>
            </tr>
            <tr>
              <td>系统管理员</td>
              <td><el-input readonly v-model="netEamilAdminName" /></td>
              <td><el-input readonly v-model="netEamilAdminPost" /></td>
              <td><el-input readonly v-model="netEamilAdminDepartment" /></td>
              <td><el-input readonly v-model="netEamilAdminTel" /></td>
              <td><el-input readonly v-model="netEamilAdminPhone" /></td>
            </tr>
          </table>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import {getPersonList} from "@/api/datacentersg/personnelPut/personnelPut.js";
import store from "@/store";
export default {
  data() {
    return {
      title: "",
      fillingOrg: "",
      fillingPerson: "",
      fillingTel: "",
      netSafeAdminName: "",
      netSafeAdminPost: "",
      netSafeAdminDepartment: "",
      netSafeAdminTel: "",
      netSafeAdminPhone: "",
      netSafeSecrecyName: "",
      netSafeSecrecyPost: "",
      netSafeSecrecyDepartment: "",
      netSafeSecrecyTel: "",
      netSafeSecrecyPhone: "",
      netSafeAuditName: "",
      netSafeAuditPost: "",
      netSafeAuditDepartment: "",
      netSafeAuditTel: "",
      netSafeAuditPhone: "",
      netManagerAdminName: "",
      netManagerAdminPost: "",
      netManagerAdminDepartment: "",
      netManagerAdminTel: "",
      netManagerAdminPhone: "",
      netManagerSecrecyName: "",
      netManagerSecrecyPost: "",
      netManagerSecrecyDepartment: "",
      netManagerSecrecyTel: "",
      netManagerSecrecyPhone: "",
      netManagerAuditName: "",
      netManagerAuditPost: "",
      netManagerAuditDepartment: "",
      netManagerAuditTel: "",
      netManagerAuditPhone: "",
      netEamilAdminName: "",
      netEamilAdminPost: "",
      netEamilAdminDepartment: "",
      netEamilAdminTel: "",
      netEamilAdminPhone: "",
      heightTree: window.innerHeight - 150 + "px",
      heightTable: window.innerHeight - 240 + "px",
      data: [
        {
          name: "山东省",
          children: [
            {
              name: "济南市",
            },
            {
              name: "青岛市",
            },
            {
              name: "淄博市",
            },
            {
              name: "枣庄市",
            },
            {
              name: "东营市",
            },
            {
              name: "烟台市",
            },
            {
              name: "潍坊市",
            },
            {
              name: "济宁市",
            },
            {
              name: "泰安市",
            },
            {
              name: "威海市",
            },
            {
              name: "日照市",
            },
            {
              name: "临沂市",
            },
            {
              name: "德州市",
            },
            {
              name: "聊城市",
            },
            {
              name: "滨州市",
            },
            {
              name: "菏泽市",
            },
          ],
        },
      ],
      defaultProps: {
        children: "children",
        label: "label",
      },
      dataLabel:"",
    };
  },
  created() {
    this.$watch('dataLabel', (newVal, oldVal) => {
    if (newVal) {
      this.getList();
    } else {
      this.$message({
        message: "请先选择机构",
        type: "warning",
      });
    }
  });
  },
  methods: {
    getList() {
      this.clear();
      const params = {
        userId: store.getters.user_id.toString(),
        token: store.getters.token.toString(),
        data: {
          status: "1",
          organization:this.dataLabel,
        },
      };
      getPersonList(params).then((result) => {
        if (result.resultdata) {
          this.fillingOrg = result.resultdata[0].fillingOrg;
          this.fillingPerson = result.resultdata[0].fillingPerson;
          this.fillingTel = result.resultdata[0].fillingTel;
          this.netSafeAdminName = result.resultdata[0].netSafeAdminName;
          this.netSafeAdminPost = result.resultdata[0].netSafeAdminPost;
          this.netSafeAdminDepartment =result.resultdata[0].netSafeAdminDepartment;
          this.netSafeAdminTel = result.resultdata[0].netSafeAdminTel;
          this.netSafeAdminPhone = result.resultdata[0].netSafeAdminPhone;
          this.netSafeSecrecyName = result.resultdata[0].netSafeSecrecyName;
          this.netSafeSecrecyPost = result.resultdata[0].netSafeSecrecyPost;
          this.netSafeSecrecyDepartment = result.resultdata[0].netSafeSecrecyDepartment;
          this.netSafeSecrecyTel = result.resultdata[0].netSafeSecrecyTel;
          this.netSafeSecrecyPhone = result.resultdata[0].netSafeSecrecyPhone;
          this.netSafeAuditName = result.resultdata[0].netSafeAuditName;
          this.netSafeAuditPost = result.resultdata[0].netSafeAuditPost;
          this.netSafeAuditDepartment =result.resultdata[0].netSafeAuditDepartment;
          this.netSafeAuditTel = result.resultdata[0].netSafeAuditTel;
          this.netSafeAuditPhone = result.resultdata[0].netSafeAuditPhone;
          this.netManagerAdminName = result.resultdata[0].netManagerAdminName;
          this.netManagerAdminPost = result.resultdata[0].netManagerAdminPost;
          this.netManagerAdminDepartment = result.resultdata[0].netManagerAdminDepartment;
          this.netManagerAdminTel = result.resultdata[0].netManagerAdminTel;
          this.netManagerAdminPhone = result.resultdata[0].netManagerAdminPhone;
          this.netManagerSecrecyName = result.resultdata[0].netManagerSecrecyName;
          this.netManagerSecrecyPost = result.resultdata[0].netManagerSecrecyPost;
          this.netManagerSecrecyDepartment = result.resultdata[0].netManagerSecrecyDepartment;
          this.netManagerSecrecyTel = result.resultdata[0].netManagerSecrecyTel;
          this.netManagerSecrecyPhone =result.resultdata[0].netManagerSecrecyPhone;
          this.netManagerAuditName = result.resultdata[0].netManagerAuditName;
          this.netManagerAuditPost = result.resultdata[0].netManagerAuditPost;
          this.netManagerAuditDepartment =result.resultdata[0].netManagerAuditDepartment;
          this.netManagerAuditTel = result.resultdata[0].netManagerAuditTel;
          this.netManagerAuditPhone = result.resultdata[0].netManagerAuditPhone;
          this.netEamilAdminName = result.resultdata[0].netEamilAdminName;
          this.netEamilAdminPost = result.resultdata[0].netEamilAdminPost;
          this.netEamilAdminDepartment =result.resultdata[0].netEamilAdminDepartment;
          this.netEamilAdminTel = result.resultdata[0].netEamilAdminTel;
          this.netEamilAdminPhone = result.resultdata[0].netEamilAdminPhone;
        }
      });
    },
    handleNodeClick(data) {
        this.dataLabel = data.label;
    },
    clear(){
      this.fillingOrg = ""; 
      this.fillingPerson = ""; 
      this.fillingTel = "";
      this.netSafeAdminName = ""; 
      this.netSafeAdminPost = ""; 
      this.netSafeAdminDepartment = "";
      this.netSafeAdminTel = ""; 
      this.netSafeAdminPhone = ""; 
      this.netSafeSecrecyName = ""; 
      this.netSafeSecrecyPost = ""; 
      this.netSafeSecrecyDepartment = "";
      this.netSafeSecrecyTel = ""; 
      this.netSafeSecrecyPhone = ""; 
      this.netSafeAuditName = ""; 
      this.netSafeAuditPost = ""; 
      this.netSafeAuditDepartment = "";
      this.netSafeAuditTel = ""; 
      this.netSafeAuditPhone = ""; 
      this.netManagerAdminName = ""; 
      this.netManagerAdminPost = ""; 
      this.netManagerAdminDepartment = "";
      this.netManagerAdminTel = ""; 
      this.netManagerAdminPhone = ""; 
      this.netManagerSecrecyName = ""; 
      this.netManagerSecrecyPost = ""; 
      this.netManagerSecrecyDepartment = "";
      this.netManagerSecrecyTel = ""; 
      this.netManagerSecrecyPhone = "";
      this.netManagerAuditName = ""; 
      this.netManagerAuditPost = ""; 
      this.netManagerAuditDepartment = "";
      this.netManagerAuditTel = ""; 
      this.netManagerAuditPhone = "";
      this.netEamilAdminName = "";
      this.netEamilAdminPost = ""; 
      this.netEamilAdminDepartment = "";
      this.netEamilAdminTel = ""; 
      this.netEamilAdminPhone = "";
    },
  },
};
</script>

<style scoped>
.el-col {
  background: #fff;
}
.myTable {
  width: 100%;
  margin-bottom: 10px;
  border-spacing: 0;
  border: 1px solid #dcdfe6;
}

.myTable tbody {
  width: 100%;
}

.myTable td {
  word-wrap: break-word;
  font-size: 18px;
  padding: 15px 10px;
  text-align: center;
}
.infohead {
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.infohead p{
  font-size:18px;
}
.inputVal{
  border: none;
  border-bottom:1px solid #000;
  font-size:16px;
  font-weight: lighter;
}
>>>.el-input--small .el-input__inner{
  border: none;
  text-align: center;
  font-size:16px;
}
>>>.el-tree-node__label{
  font-size:16px;
}
</style>